<template>
    <!-- 底部播放控制台 -->
    <div class="playConsole" v-show="songItemFlag">
        <audio autoplay id="audio" :src="audioSrc"></audio>
        <div class="info" v-if="songItem.id">
            <img :src="songItem.al.picUrl" alt="">
            <div class="infoDiv">
                <span class="songName">{{songItem.name}}</span>
                <span class="name">{{songItem.gs.join('/')}}</span>
            </div>
        </div>
        <div class="console">
            <div class="consoleBth">
                <i class="iconfont big-icon-test9"></i>
                <i class="iconfont big-icon-test3" @click="front()"></i>
                <i @click="playBth()" :class="playFlag? 'iconfont big-big-icon-test2':'iconfont big-icon-test1'"></i>
                <i class="iconfont big-icon-test7" @click="next()"></i>
                <i class="iconfont big-ci"></i>
            </div>
            <span class="starTime">{{$moment(starTime).format('mm:ss')}}</span>
            <div  class="progressPer" 
                @click="progressPerClick()"
                @mousemove="mousemove" 
                @mouseleave="mouseleave()" 
                @mouseenter="mouseenter()"
                @mousedown.stop="mousedown"
                @mouseup="mouseup"
                >
                <div class="progress" id="progress">
                    <span
                    id="dian"
                    class='progressSpan'>
                    </span>
                    <i></i>
                </div>
            </div>
            <span class="endTime">{{$moment(endTime).format('mm:ss')}}</span>
        </div>
        <div class="info">
        </div>
    </div>
</template>

<script>
import { createLogger, mapGetters } from 'vuex'
export default {
    data(){
        return{
            starTime:0,
            endTime:0,
            nl:"",
            playFlag:false,
            audioSrc:"",
            songItem:{},
            songItemFlag:false,
            mouseFlag:false,
            isDown:false,
            sheetList:[],
        }
    },
    computed: {
        ...mapGetters(["getSongItem","getSheetList"]),
    },
    watch: {
        // 监听id变化
        getSongItem(newData, oldData){
            this.getSongUrl(newData.id);
            this.songItem = newData;
            this.songItemFlag = true;
        },
        getSheetList(newData, oldData){
            this.sheetList = newData;
        }
    },
    mounted(){
        let audio = document.getElementById('audio');
        audio.onended = this.onended;
        audio.oncanplay=()=>{
            this.endTime = audio.duration*1000;
            audio.ontimeupdate = ()=>{
                this.currTime();
            }
        }
        this.sheetList = this.getSheetList;
    },
    methods:{
        // 获取歌曲播放链接
        getSongUrl(id){
            this.$axios.get('/song/url?id='+id).then(res=>{
                if(200==res.data.code){
                    this.audioSrc = res.data.data[0].url;
                    this.playFlag = false;
                }
            })
        },
        playBth(){
            // 播放
            if(this.playFlag){
                this.play();
            }else{
                this.pause();
            }
            this.playFlag = !this.playFlag
        },
        // 播放
        play(){
            let audio = document.getElementById('audio');
            audio.play();
        },
        // 暂停
        pause(){
            let audio = document.getElementById('audio');
            audio.pause();
        },
        // 播放完成
        onended(){
            this.playFlag = true;
            this.next();
        },
        // 上一首点击
        front(){
            let id = ""
            for(let i=0; i<this.sheetList.length;i++){
                if(this.songItem.id==this.sheetList[i].id){
                    id = this.sheetList[i-1].id
                    this.$store.dispatch('setSongId',this.sheetList[i-1])
                }
            }
            this.getSongUrl(id)
        },
        // 下一首点击
        next(){
            let id = ""
            for(let i=0; i<this.sheetList.length;i++){
                if(this.songItem.id==this.sheetList[i].id){
                    id = this.sheetList[i+1].id
                    this.$store.dispatch('setSongId',this.sheetList[i+1])
                }
            }
            this.getSongUrl(id)
        },
        // 当前播放秒数
        currTime(){
            let audio = document.getElementById('audio');
            let time = audio.currentTime*1000;
            this.starTime = time;
            let xLeft = (audio.currentTime/audio.duration)*100;
            document.getElementById('dian').style.left = xLeft+"%";
        },
        // 鼠标移入
        mouseenter(){
            this.mouseFlag = true;
        },
        // 鼠标移出
        mouseleave(){
            this.mouseFlag = false;
        },
        // 鼠标点击
        progressPerClick(){
            let audio = document.getElementById('audio');
            let width = document.getElementById('progress').offsetWidth;
            let proportion = this.nl/width;
            let time = audio.duration*proportion;
            audio.currentTime = time;
        },
        // 鼠标按下
        mousedown(e){
            this.isDown = true;
            let pageX = e.pageX;
            let progress = document.getElementById('progress').offsetLeft;
            let x = pageX-progress;
            this.nl = x;
            document.getElementById('dian').style.left = x+'px'
            window.onmousemove = this.mousemove
            window.onmouseup = this.mouseup
        },
        // 鼠标松开
        mouseup(e){
            this.isDown = false;
        }, 
        // 鼠标拖动
        mousemove(e){
            if(this.isDown){
                let pageX = e.pageX;
                let progress = document.getElementById('progress').offsetLeft;
                let width = document.getElementById('progress').offsetWidth;
                let x = pageX-progress;
                document.getElementById('dian').style.left = x+"px";
                if(x>width){
                    document.getElementById('dian').style.left = "100%";
                }
                if(x<0){
                    document.getElementById('dian').style.left = "0%";
                }
            }
        },
    }
}
</script>

<style lang="scss" scoped>
@import "./PlayConsole.scss";
</style>